<template>
    <div>
        <router-link tag="div" :to="'/mediaReport/article/' + item.title" class="item-warpper" v-for="(item , index) in list" :key="index">
            <div class="img-warpper">
                <img class="item-img" :src="item.imgUrl" alt="">
            </div>
            <div class="item-title">{{item.title}}</div>
        </router-link>
    </div>
</template>

<script>
export default {
    name: 'rightList',
    data () {
        return {
            list: [
                {
                    imgUrl: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1532103881244&di=5cc3e6651a24ecf81b786986bab1ef1f&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F3b87e950352ac65c2a954997f7f2b21192138a45.jpg',
                    title: '金牌服务  诚信专业共创辉煌金牌服务  诚信专业共创辉煌金牌服务  诚信专业共创辉煌金牌服务  诚信专业共创辉煌金牌服务  诚信专业共创辉煌'
                },
                 {
                    imgUrl: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1532103881243&di=de6587f0adea097ce031528d382310f4&imgtype=0&src=http%3A%2F%2Fd.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F1ad5ad6eddc451da32a3200fbafd5266d11632f8.jpg',
                    title: '金牌服务  诚信专业共创辉煌'
                }, {
                    imgUrl: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1532103881242&di=3b866ebed414b438f071a3eb89a30b15&imgtype=0&src=http%3A%2F%2Fg.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fae51f3deb48f8c54fa86e9cb36292df5e1fe7ff8.jpg',
                    title: '金牌服务  诚信专业共创辉煌'
                }, {
                    imgUrl: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1532103881242&di=f7767317dfea492ea006db7b0255231a&imgtype=0&src=http%3A%2F%2Ff.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F8694a4c27d1ed21bab193906a16eddc450da3f04.jpg',
                    title: '金牌服务  诚信专业共创辉煌'
                }
            ]
        }
    }
}
</script>

<style lang="stylus" scoped>
    .item-warpper
        width: 100%
        height 232px
        box-shadow 0 0 5px rgba(#000,.2)
        margin-bottom 40px
        cursor pointer
        overflow hidden
        .img-warpper
            width 100%
            height 175px
            background-color #000
            overflow hidden
            .item-img
                width 100%
                height 175px
                transition .5s all
                object-fit cover;
                &:hover
                    opacity .8
                    transform scale(1.2)
        .item-title
            box-sizing border-box
            padding 0 15px
            padding-top 5px
            font-size 16px
            line-height 23px
            color #5287ff
            overflow  hidden
            text-overflow ellipsis
            display -webkit-box
            -webkit-line-clamp 2
            -webkit-box-orient vertical
</style>

